<template>
  <!-- 设置笔记/文件名组件 -->
  <div class="setName" v-if="$store.state.showSetName">
    <!-- 头部 -->
    <div class="setNameHeader">
      <span>名称</span>
      <!-- 关闭按钮 -->
      <i class="iconfont icon-guanbi" @click="hideSetName"></i>
    </div>
    <!-- 笔记名 -->
    <div class="setNameMain">
      <input
        type="text"
        placeholder="请输入名称"
        v-model="$store.state.nowName"
        @keydown.enter="setNameConfirm"
        class="setNameInput"
      />
    </div>
    <!-- 确定按钮 -->
    <button class="setNameBtn" @click="setNameConfirm">确定</button>
  </div>
</template>

<script>
export default {
  name: "SetName",
  props: ["userData"],
  methods: {
    // 隐藏设置名称
    hideSetName() {
      // this.showSetName = false;
      this.$store.commit("setShowSetName", false);
      this.$store.commit("setNowName", "");
    },
    // 点击设置名字确定按钮时调用
    setNameConfirm() {
      switch (this.$store.state.setNameMode) {
        // 新建文件夹
        case 0:
          console.log({
            type: this.$store.state.setNameMode,
            title: this.$store.state.nowName,
          });
          // this.nowName = "";
          this.addNoteFun();
          this.$store.commit("setNowName", "");
          this.$store.commit("setShowSetName", false);
          // this.showSetName = false;
          // this.$bus.$emit("reGetNowFileList", "1");
          break;
        // 新建笔记
        case 1:
          // console.log({
          //   type: this.$store.state.setNameMode,
          //   title: this.$store.state.nowName,
          // });
          // 添加笔记
          this.addNoteFun();
          // 隐藏设置名字组件
          this.$store.commit("setNowName", "");
          this.$store.commit("setShowSetName", false);
          break;
        // 重命名
        case 2:
          console.log({
            title: this.$store.state.nowName,
            id: this.$store.state.nowItemFile.id,
          });
          // this.nowName = "";
          this.$store.commit("setNowName", "");
          this.$store.commit("setShowSetName", false);
          // this.$bus.$emit("reGetNowFileList",this.userData.id);
          // this.showSetName = false;
          break;
      }
    },
    // 添加笔记或文件夹的方法
    async addNoteFun() {
      // console.log("添加笔记的方法");
      // console.log(this.userData.id);
      // console.log(!!this.$store.state.setNameMode);
      // 要传给后端的参数
      // console.log(this.$store.state.nowPath[this.$store.state.nowPath.length-1]);
      // fatherid是nowPath当前路径的最后一个值
      let noteInfo = {
        title: this.$store.state.nowName,
        type: this.$store.state.setNameMode + "",
        fatherid:
          this.$store.state.nowPath[this.$store.state.nowPath.length - 1],
        encryption: false,
        cooperation: false,
        cooperationUrl: "",
        cooperationUserId: "",
        data: "",
      };
      // console.log(noteInfo);
      const { data: res } = await this.$http.addNote(noteInfo);
      // console.log(res);
      // 添加成功
      if (res.code === 20000) {
        // 重新获取文件列表数据
        this.$tools.getNote(
          this,
          this.$store.state.nowPath[this.$store.state.nowPath.length - 1]
        );
        console.log(res.data.noteId);
        if (!!this.$store.state.setNameMode) {
          //跳转到笔记编辑页面
          this.$router.push({ name: 'noteeditorid', params: { id: res.data.noteId } })
        }
      } else {
        if (!!this.$store.state.setNameMode) {
          this.$message.error("新建笔记失败");
        } else {
          this.$message.error("新建文件夹失败");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.setName {
  width: 380px;
  // height: 300px;
  background-color: rgb(234, 246, 255);
  // background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  // border: rgb(47, 47, 47) 1px solid;
  // z-index: 101;
  .setNameHeader {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 30px;
    background-color: rgb(106, 168, 212);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: white;
    i {
      position: absolute;
      right: 10px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .setNameMain {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    span {
      // color: white;
      font-size: 16px;
      margin-right: 10px;
    }
    input {
      // border: none;
      outline: none;
      // background-color: rgb(106, 168, 212);
      border: 1px solid rgb(106, 168, 212) s;
      border-radius: 5px;
      width: 60%;
      height: 30px;
      padding: 0 20px;
      border: 1px solid transparent;
      // 鼠标移入输入框包裹器时
      &:hover {
        // 边框
        border: 1px solid #0182c7;
      }
    }
  }
  .setNameBtn {
    display: block;
    width: 90px;
    height: 30px;
    background-color: rgb(106, 168, 212);
    margin: 0 auto;
    border-radius: 999px;
    text-align: center;
    line-height: 30px;
    color: white;
    margin-bottom: 20px;
    cursor: pointer;
    &:hover {
      background-color: rgba(106, 168, 212, 0.8);
    }
  }
}
@media (max-width: 380px) {
  .setName {
    width: 100%;
  }
}
</style>